<template>
	<view>
		<view style="margin-left: 20px;width: 100%;">{{ nameById(value) || value }}</view>
		<u-picker :show="visible" :columns="[cols]" keyName="name" @confirm="confirm"
			@cancel="$emit('update:visible', false)" />
		<u-modal :show="show" :title="`请输入${title}`" :showCancelButton="true" @confirm="otherConfirm"
			@cancel="otherCancel">
			<u--input v-model="other" @input="input"></u--input>
		</u-modal>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		props: {
			// 窗口外部开关
			visible: {
				type: Boolean,
				default: false
			},
			// 创建、修改时的数据
			value: {
				type: [Number, String],
				default: ''
			},
			// 类型 brands 全部品牌  或 channels 购买渠道
			type: {
				type: String,
				default: 'brands'
			}
		},
		data() {
			return {
				show: false,
				// 其他品牌或购买渠道
				other: '',
			};
		},
		computed: {
			...mapGetters('brandChannel', ['nameById','brands']),
			/**
			 * @example 标题
			 * @returns {String} 品牌 或 购买渠道
			 */
			title() {
				const { type } = this
				if (!['brands', 'channels'].includes(type)) return ''
				return type === 'brands' ? '品牌' : '购买渠道'
			},
			/**
			 * @example brands 全部品牌  或 channels 购买渠道
			 * @returns {Array} 一维数组
			 */
			cols() {
				const { type, title } = this
				const res = this.$store.getters[`brandChannel/${type}`]
				if (type === 'channels') return res
				return [...res, { name: `其他${title}`, id: 'other' }]
			}
		},
		watch:{
			cols(){
				const { type, brands,value } = this
				// 当有值时，不获取默认
				if(value) return
				if (type !== 'brands') return
				// 类型为品牌时，获取默认品牌
				if (Array.isArray(brands) && brands.length > 0){
					const {id} = brands[0]
					this.$emit('confirm', id)
					this.$emit('input', id)
				} 
			}
		},
		methods: {
			/**
			 * @example 输入其他品牌或购买渠道时,及时关闭picker
			 * @param {Object} val 其他品牌或购买渠道
			 */
			input(val) {
				if (val) this.$emit('update:visible', false)
			},
			/**
			 * @example 录入其他品牌或购买渠道点击取消按钮
			 */
			otherCancel() {
				this.show = false
				this.$emit('update:visible', true)
			},
			/**
			 * @example 确定录入其他品牌或购买渠道
			 */
			otherConfirm() {
				const { other } = this
				if (!other) return
				this.show = false
				this.$emit('input', other)
				this.$emit('confirm', other)
				this.$emit('update:visible', false)
			},
			/**
			 * @example 确认选择时间
			 * @param {Object} 回调参数为包含columnIndex、value、values
			 * @param {Array} indexs 索引一维数组
			 * @param {Array} value 选择的一维数组
			 * @param {Array} values 可选择的二维数组
			 */
			confirm({ indexs, value, values }) {
				const { id } = value[0]
				this.$emit('update:visible', false)
				// 如选择其他,则打开其他窗口录入
				if (id === 'other') {
					return this.show = true
				}
				this.$emit('confirm', id)
				this.$emit('input', id)
				return id
			}
		}
	}
</script>